/// 页面 * 主界面 * 样式

import { css } from '@emotion/css'
import bgLogo from '../Login/assets/logo.png'
import bg from './assets/bg.jpg'

const mainCSS = css`
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: transparent;

  /* 背景图 */
  ${after(css`
    position: absolute;
    opacity: 0.4;
    z-index: -1;
    top: 0;
    left: 0;
    ${wh()}
    ${bgImg(bg)}
  `)}

  /* 头 */
  > .header {
    position: relative;
    display: flex;
    padding: 0;
    height: 60px;
    background: rgba(255, 255, 255, 0.6) !important;
    border-bottom: 1px solid #ffffff;

    /* 徽标 */
    ${before(css`
      margin-left: 16px;
      margin-right: 50px;
      width: 150px;
      min-width: 150px;
      height: 58px;
      ${bgImg(bgLogo)}
    `)}

    /* 标题 */
    > .title {
      position: absolute;
      top: 1px;
      left: 172px;
      height: 100%;
      line-height: 61px;
      ${flex()}
      ${font(16, 'bold', '#268CFF')}
      cursor: pointer;

      > .ex-icon {
        margin-bottom: 1px;
        margin-right: 12px;
        color: #4fa7ff;
        transition: color 0.3s linear;
      }

      /* ${before(css`
        margin-top: 1px;
        margin-right: 12px;
        ${whpx(1, 24)}
        background: #268CFF;
      `)} */

      &:hover > .ex-icon {
        color: #268cff;
      }
    }

    /* 菜单栏 */
    > .menusbar {
      flex: 1;
      ${flex('space-between')}
      user-select: none;
      overflow: hidden;

      > .menu-home {
        height: 100%;
        ${flex('center')}
        margin-right: 12px;
        margin-bottom: 3px;

        > .ex-icon {
          padding: 8px;
          cursor: pointer;
          color: #4fa7ff;
          transition: color 0.3s linear;
        }

        &:hover > .ex-icon {
          color: #268cff;
        }
      }

      > .menus {
        height: 100%;
        flex: 1;
        overflow: hidden;

        > .ant-menu {
          height: 100%;
          background-color: inherit;
          ${flex()}

          /* 菜单项 */
          > .ant-menu-item {
            position: relative;
            padding: 0 16px;
            height: 32px;

            > .ant-menu-title-content {
              position: relative;
              ${flex('center')}
              height: 100%;
              color: #202735;
              transition:
                color 0.2s ease,
                padding 0.3s linear;
              z-index: 0;

              ${before(css`
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: -1;
                border-radius: 4px;
                background: linear-gradient(90deg, #0067ff 0%, #4993ff 100%);
                box-shadow:
                  inset 0px 4px 10px 0px rgba(19, 158, 158, 0.302),
                  0px 3px 6px 0px rgba(26, 118, 255, 0.5);
                opacity: 0;
                transition: opacity 0.3s linear;
              `)}
            }

            &:hover > .ant-menu-title-content {
              padding: 0 16px;
              color: #fff;
            }
            &:hover > .ant-menu-title-content::before {
              opacity: 1;
            }

            &.ant-menu-item-selected {
              background-color: initial;
              > .ant-menu-title-content {
                padding: 0 16px;
                color: #fff;
              }
              > .ant-menu-title-content::before {
                opacity: 1;
                background: linear-gradient(90deg, #4993ff 0%, #0067ff 100%);
              }
            }

            &::after {
              ${after2block()}
              width: 1px;
              height: 20px;
              position: absolute;
              top: 6px;
              left: 0;
              background-color: rgba(0, 103, 255, 0.5);
            }
            /* &:first-child {
              &::after {
                display: none;
              }
            } */
          }

          /* 菜单溢出项 */
          > .ant-menu-overflow-item-rest {
            position: relative;
            padding: 0 16px;
            height: 32px;

            > .ant-menu-submenu-title {
              ${flex('center')}
              height: 100%;
              z-index: 0;

              > .ant-menu-title-content {
                color: #202735;
                transition:
                  color 0.2s ease,
                  padding 0.3s linear;
              }

              ${before(css`
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: -1;
                border-radius: 4px;
                background: linear-gradient(90deg, #0067ff 0%, #4993ff 100%);
                box-shadow:
                  inset 0px 4px 10px 0px rgba(19, 158, 158, 0.302),
                  0px 3px 6px 0px rgba(26, 118, 255, 0.5);
                opacity: 0;
                transition: opacity 0.3s linear;
              `)}
            }

            &:hover > .ant-menu-submenu-title {
              > .ant-menu-title-content {
                padding: 0 16px;
                color: #fff;
              }
              &::before {
                opacity: 1;
              }
            }

            &::after {
              ${after2block()}
              width: 1px;
              height: 20px;
              position: absolute;
              top: 6px;
              left: 0;
              background-color: rgba(0, 103, 255, 0.5);
            }

            /* &[style*="order: -1"]::after {
              display: none;
            } */

            &.ant-menu-submenu-selected {
              background-color: initial;

              > .ant-menu-submenu-title {
                > .ant-menu-title-content {
                  padding: 0 16px;
                  color: #fff;
                }

                &::before {
                  opacity: 1;
                  background: linear-gradient(90deg, #4993ff 0%, #0067ff 100%);
                }
              }
            }
          }
        }
      }

      > .menus-right {
      }
    }
  }

  /* 体 */
  > .body {
    background-color: transparent;

    /* 侧边 */
    > .sider {
      padding-top: 3px;
      background-color: transparent !important;
      border-right: 1px solid rgba(255, 255, 255, 0.8);

      .ant-layout-sider-children {
        margin: 0;
        padding: 0;
      }
      .scrollbar {
        position: relative;
        ${wh()}
        overflow: hidden;

        > .ant-menu {
          user-select: none;
          background: transparent;
          color: #202735;

          .ant-menu-submenu-title {
            color: #202735;

            &:hover {
              background-color: rgba(0, 0, 0, 0.025);
            }
          }
          .ant-menu-sub {
            background-color: rgb(38 140 255 / 10%);
          }
          .ant-menu-item {
            margin: 0;
            width: 100%;
            border-radius: 0;
            color: #202735;

            ${before(css`
              position: absolute;
              left: 8px;
              z-index: -1;
              width: calc(100% - 16px);
              height: calc(100% - 6px);
              opacity: 0;
              background: linear-gradient(270deg, #268cff 100%, rgba(73, 147, 255, 0.82) 99%);
              box-shadow: 0px 4px 4px 0px rgba(38, 140, 255, 0.3);
              border-radius: 4px;
              transition: opacity 0.3s ease;
            `)}

            &.ant-menu-item-selected {
              color: #fff;
              font-weight: 700;
              background: transparent;

              &::before {
                opacity: 1;
              }
              &:hover::before {
                opacity: 0.8 !important;
              }
            }

            &:hover {
              background: transparent;

              &:hover::before {
                opacity: 0.6;
              }
            }
            &:active {
              color: #fff;
              background-color: transparent;
            }
          }

          /* 折叠菜单项 */
          .ant-menu-submenu > .ant-menu-submenu-title {
            margin: 0;
          }
        }
      }
    }

    /* 内容 */
    > .content {
      overflow: hidden;

      > .ex-loading {
        height: calc(100% - 32px);

        > .ant-spin-container {
          height: 100%;
        }

        .ant-spin-spinning {
          max-height: inherit;
        }
      }
    }
  }
`

const alarmballCss = css`
  width: 100px;
  height: 100px;
  position: fixed;
  left: 0;
  top: 100px;
  background: red;
  border-radius: 50%;
`

export { mainCSS, alarmballCss }
